搭建个人博客(github pages + Hexo + 域名绑定)(Windows)

发表于

本篇博客适用人群：爱捣鼓的小伙伴们。

一、运行环境

Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

  • npm

NPM是随同的NodeJS一起安装的包管理工具，能解决的NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入“npm -v”来测试是否成功安装。

  • 创建Github Pages

Github免费的静态站点，可以理解为GitHub官方提供的一个创建自己的静态网站/博客的方法。

登陆自己的GitHub账号并创建仓库，仓库命名格式为「yourusername.github.io」

验证是否安装成功

  • git –version
  • node -v
  • npm -v

check_env

出现版本号则表明安装成功。

二、博客框架配置

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

打开Hexo官网，如下：

hexo

打开终端，执行如下操作。

  1. 安装hexo；

    npm install hexo-cli -g

  2. 进入存放博客的目录，执行如下命令；

    1
    2
    3
    hexo init blog
    cd blog
    npm install

  3. 启动本地服务器进行预览。

    hexo server

在浏览器中打开 http://localhost:4000/ ，就可以预览当前的效果，可以看到，hexo会有一篇默认的博客。

hexo_default_theme

三、修改主题

  1. 选择主题

自带的主题看起来有点单调，我们可以选择其他主题。

hexo官网自带主题：https://hexo.io/themes/
github上的热门主题:

​ https://github.com/iissnan/hexo-theme-next

​ https://github.com/hexojs/hexo/wiki/Themes

另外，如果你自己懂css，那么也可以自己写一个主题来用。

  1. 安装主题

安装主题三步走：

第一步：选择主题

​ 假设现在我们选择了aircloud主题。

第二步：克隆主题到本地

​ aircloud的git库地址为：https://github.com/aircloud/hexo-theme-aircloud.git，那么我们就可以进行如下操作：

clone_theme

第三步：修改配置文件

hexo初始化之后的blog中会有名为_config.yml的配置文件,一般我们需要对整个博客进行配置时（比如主题），在该文件中进行，文件中的配置项是以键值对的形式存在的，配置时注意键和值之间要留空（可以参考默认配置）。另外，主题也会有自己的配置文件，文件名同为_config.yml（theme文件夹下），千万不要和整个blog的配置文件搞混哦！主题配置可参考对应主题的官方文档。

注：本小结提到的配置文件_config.yml，除非特殊说明，否则均指整个博客的配置文件（blog目录下）。

基础配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
title: xxx  # 博客的名字，也称站点名称
author: xxx # 作者名字
description: xxx # 对站点的描述，搜索引擎会抓取，可以自定义
language: zh-Hans # 语言 简体中文
theme: aircloud  # 配置主题
deploy: # 部署相关配置
    type: git # 使用 Git 提交
    repo: https://github.com/xxx/xxx.github.io.git # 就是存放博客的仓库地址

更多属性配置可参考hexo官方文档。

预览一下我们修改后的效果吧，在blog目录下执行：hexo server，进入浏览器访问http://localhost:4000/查看预览效果。

四、发布博客

安装自动部署工具

1
npm install hexo-deployer-git --save

在blog\source\_posts文件夹中放入自己写好的Markdown文档，并在blog目录下执行如下命令：

1
2
3
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo generate #生成静态网页,也可缩写为hexo g
hexo deploy #开始部署,也可缩写为hexo d

命令执行完过几分钟后，打开yourusername.github.io（运行环境中提到的Github Pages）便可以看到自己写的博客了。

注意事项

  1. 创建好仓库之后，要本地生成 SSH 秘钥，方便电脑上的 git 软件好提交内容到 Github 上。（如果之前有配置 过，则可以跳过这一步）
    在终端中执行命令：ssh-keygen -t rsa -C "你的邮箱地址",根据提示（一般是连续点三次回车）操作，之后便可以在/c/Users/[你的用户名]/.ssh/id_rsa文件中生成密钥，访问：https://github.com/settings/ssh，添加新密钥。
  2. 如果是第一次部署，终端会提示要求输入用户名和密码。以后发布博客的时候，可以直接在博客目录下执行hexo clean & hexo g & hexo d。

至此，我们已经可以正常写博客并随时随地在有网的地方进行访问了。但是 ，有的小伙伴可能觉得yourusername.github.io这个网址太大众了，想要一个比较独（zhuang）特（bi）的网址，别急，接着往下看。

五、绑定域名

绑定域名之前，先得购买一个自己的域名，这里我自己用的是阿里云的域名服务。购买域名后，要对域名进行解析。

域名解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。

简而言之，域名解析就是让你购买的域名指向yourusername.github.io，下次访问购买的域名时就相当于是在访问你的GitHub Pages。

添加域名解析

登入阿里云（淘宝账号就可以哦），进入 管理控制台 –> 域名与网站 –> 域名 –> 域名列表 ，找到自己刚刚购买的域名，点击解析按钮进入解析页面。

dns

点击添加解析:

add_dns

填法如下:

记录类型：CNAME

主机记录：www

解析线路：默认

记录值：yourusername.github.io

点击确认，添加完成后即时生效。

添加Github解析

在GitHub中进入「yourusername.github.io」仓库，在Settings –> GitHub Pages –> Custom domain 中输入自己的域名，点击保存。

至此，域名绑定完成。在地址栏中输入自己购买的域名即可以访问自己的博客了。不过有的人可能不那么顺利，输入域名后会弹出如下页面：

404

出现这种问题时，重新检查自己的域名解析和GitHub解析是否填写正确，如确认无误，等两分钟再访问，问题方可解决。